<template>

  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <!-- <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 优惠券管理
        </el-breadcrumb-item> -->
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-button style="float: left;" type="primary" icon="el-icon-circle-plus-outline" @click="addcoupon">添加优惠券
      </el-button>
      <el-form :inline="true" :model="editForm" class="user-search" style="float: right;">

         <el-select v-model="editForm.city" placeholder="城市区域" class="handle-select mr10">
          <el-option selected label="请选择" value="0"></el-option>
          <el-option v-for="city in cityaggregate" :key="city.areaId" :label="city.address" :value="city.areaId"></el-option>

          </el-select>

        <el-select v-model="editForm.state" placeholder="优惠券状态" class="handle-select mr10">
          <el-option key="1" label="已发布" value="10"></el-option>
          <el-option key="2" label="未发布" value="9"></el-option>
          <el-option key="3" label="已过期" value="11"></el-option>
        </el-select>
        <el-input v-model="editForm.full" placeholder="满额" class="handle-input mr10"></el-input>
        <el-input v-model="editForm.price" placeholder="面值" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </el-form>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
        @selection-change="handleSelectionChange">
       <el-table-column header-align="center" align="center" type="index" label="序号" fixed="left"></el-table-column>
        <el-table-column prop="couponId" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="address" label="城市"></el-table-column>
        <el-table-column prop="name" label="优惠券名称"></el-table-column>
        <el-table-column prop="full" label="满额"></el-table-column>
        <el-table-column prop="price" label="面值"></el-table-column>
        <el-table-column prop="getTime" label="领取截止时间"></el-table-column>
          <el-table-column prop="codeName" label="状态">
            <template #default="scope">
                <el-tag :type="
                        scope.row.codeName === '已发布'
                            ? 'success'
                            : scope.row.codeName === '已过期'
                            ? 'danger'
                            : scope.row.codeName === '未发布'
                            ? 'warning'
                            : ''
                    ">{{ scope.row.codeName }}</el-tag>
            </template>

          </el-table-column>

        <el-table-column label="操作" width="180" align="center">

          <template #default="scope">
            <el-button v-if="scope.row.state==9" type="text" icon="el-icon-edit"  @click="release(scope.$index, scope.row)">发布
            </el-button>
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="this.pageIndex"
          :page-size="this.pageSize" :total="pageTotal" @size-chage="handleSizeChange" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑优惠券" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="ID">
          <el-input v-model="form.id" disabled="false"></el-input>
        </el-form-item>

        <el-form-item label="城市">
        <el-select v-model="form.city" placeholder="城市区域" class="handle-select mr10">
         <el-option selected label="请选择" value="0"></el-option>
         <el-option v-for="city in cityaggregate" :key="city.areaId" :label="city.address" :value="city.areaId"></el-option>

         </el-select>
          </el-select>
        </el-form-item>
        <el-form-item label="券名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" placeholder="请输入优惠券满额" class="handle-input mr10"></el-input>
        </el-form-item>
        <el-form-item label="满额">
          <el-input v-model="form.full"></el-input>
        </el-form-item>
        <el-form-item label="面值">
          <el-input v-model="form.price"></el-input>
        </el-form-item>

        <el-form-item label="截止时间" :label-width="formLabelWidth" prop="endtime">
        <div class="block">
           <el-date-picker
             v-model="form.endtime"
             type="date"
             placeholder="选择日期"
             value-format="yyyy-MM-dd">
           </el-date-picker>
         </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 优惠券新增弹窗界面-->
    <div>
      <el-dialog title="新增优惠券" :visible.sync="addDialogFormVisible" width="500px">
        <el-form :model="addForm" ref="addForm">
          <el-form-item label="优惠券名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="addForm.name" placeholder="请输入优惠券满额" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="优惠券满额" :label-width="formLabelWidth" prop="full">
            <el-input v-model="addForm.full" placeholder="请输入优惠券满额" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="优惠券面值" :label-width="formLabelWidth" prop="price">
            <el-input v-model="addForm.price" placeholder="请输入优惠券面值" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="城市" :label-width="formLabelWidth" prop="cityid">
           <el-select v-model="addForm.city" placeholder="城市区域" class="handle-select mr10">
            <el-option selected label="请选择" value="0"></el-option>
            <el-option v-for="city in cityaggregate" :key="city.areaId" :label="city.address" :value="city.areaId"></el-option>

            </el-select>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="repairAdd()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="发布优惠券" :visible.sync="fabuDialogFormVisible" width="500px">
        <el-form :model="fabuForm" ref="fabuForm">
          <el-form-item label="ID">
               <el-input v-model="fabuForm.id" disabled="false"></el-input>
               </el-form-item>
    <el-form-item label="截止时间" :label-width="formLabelWidth" prop="endtime">
    <div class="block">
       <el-date-picker
         v-model="fabuForm.endtime"
         type="date"
         placeholder="选择日期"
      value-format="yyyy-MM-dd"
         >

       </el-date-picker>
     </div>
    </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="fabuDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="queding()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'basetable',
    data() {
      return {
        formLabelWidth: "",
        pageIndex: 1,
        pageSize: 5,
        pageTotal: "",

        tableData: [],
        multipleSelection: [],
        delList: [],
        // 城市集合
        cityaggregate: [],
        editVisible: false,
        // // 新增弹窗界面 显示
        addDialogFormVisible: false,
        fabuDialogFormVisible:false,
        // 新增弹窗界面内form表单
        addForm: {
          name: '',
          full: '',
          price: '',
          city: ''
        },
        // 搜索框
        editForm: {
          city: "",
          state: "",
          full: "",
          price: ""
        },
        fabuForm: {
          id:"",
          endtime: ""
        },
        form: {
           name: '',
          city: "",
          full: "",
          price: "",
          state: "",
          endtime: "",
          id: ""
        },
        idx: -1,
        id: -1,
        value1: ''
      };
    },
    created() {
      this.handleSearch();
    },
    methods: {
      // 获取 easy-mock 的模拟数据
      getData() {

      },
//       // 触发搜索按钮
      handleSearch() {

        this.$axios.post('/adminCoupon/search', this.$qs.stringify({
          pagenum: this.$data.pageIndex,
          pagesize: this.$data.pageSize,
          cityId: this.editForm.city>0 ?this.editForm.city:0,
          state: this.editForm.state>0 ?this.editForm.state:0,
          full: this.editForm.full>0 ?this.editForm.full:0,
          price: this.editForm.price>0 ?this.editForm.price:0,
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
        })).then(response => {
          console.log(response)
          // eslint-disable-next-line eqeqeq
          if (response.data != null) {


            // 接收后台发来的map集合table是表数据，total是总数
            this.tableData = response.data.table
            this.pageTotal = response.data.total

          }
        }).catch(err => {
          alert(err)
        })
      },

//       // 添加优惠券按钮
      addcoupon() {
        this.addDialogFormVisible = true
      },
//       // 删除操作
      handleDelete(index, row) {
  this.$confirm('此操作将永久删除该优惠券, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
  this.$axios.post('/adminCoupon/del', this.$qs.stringify({
    id: row.couponId
  })).then(response => {
  				  console.log(response)
  				  if (response.data != null) {
  				      		console.log('数据接收');
  				      console.log(response.data)
  				    if(response.data=='1'){
  				      this.$message({
  				        type: 'success',
  				        message: '删除成功!'
  				      });
this.handleSearch();
  				    }else{
  				      this.$message({
  				        type: 'fail',
  				        message: '删除失败!'
  				      });
  				    }
  				    }
  				  })
  				    }).catch(() => {
  				      this.$message({
  				        type: 'info',
  				        message: '已取消删除'
  				      });
  				    });
  				},
//           // 发布操作
  release(index, row) {
    this.$confirm('此操作将修改优惠券信息, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {

      this.fabuForm.id = row.couponId;

      this.$data.fabuDialogFormVisible = true;
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消修改'
      });
    });
  },

//优惠券发布提交
          queding(){
            this.$axios.post('/adminCoupon/release', this.$qs.stringify({
             id: this.fabuForm.id,
             endtime:this.fabuForm.endtime
            })).then(response => {
  				  console.log(response)
  				  if (response.data != null) {
  				    		console.log('数据接收');
  				    console.log(response.data)
  				  if(response.data=='1'){
  				    this.$message({
  				      type: 'success',
  				      message: '发布成功!',

  				    });
 this.$data.fabuDialogFormVisible = false;
 this.handleSearch();
  				  }else{
  				    this.$message({
  				      type: 'fail',
  				      message: '发布失败!'
  				    });
  				  }
  				  }
  				})
          },
          //添加优惠券
          repairAdd(){
            this.$axios.post('/adminCoupon/add', this.$qs.stringify({
               name: this.addForm.name,
               full: this.addForm.full,
               price:this.addForm.price,
               cityId:this.addForm.city
              })).then(response => {
              console.log(response)
              if (response.data != null) {
                		console.log('数据接收');
                console.log(response.data)
              if(response.data=='1'){
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                  this.$data.addDialogFormVisible = false;
                  this.handleSearch();
              }else{
                this.$message({
                  type: 'fail',
                  message: '添加失败!'
                });
              }
              }
            })
          },
       // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      delAllSelection() {

      },
       // 编辑操作
      handleEdit(index, row) {
        this.$confirm('此操作将修改优惠券信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form.name = row.name;
          this.form.id = row.couponId;
          // this.form.city = row.address;
          this.form.full = row.full;
          this.form.state = row.state;
          this.form.price = row.price;
          this.form.endtime = row.getTime;
          this.$data.editVisible = true;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
      },
//       // 保存编辑
      saveEdit() {
  this.$axios.post('/adminCoupon/modify', this.$qs.stringify({
             id: this.form.id,
             city: this.form.city,
             full: this.form.full,
             price: this.form.price,
             name: this.form.name,
             endtime:this.form.endtime
             })).then(response => {
   				  console.log(response)
   				  if (response.data != null) {
   				    		console.log('数据接收');
   				    console.log(response.data)
   				  if(response.data=='1'){
   				    this.$message({
   				      type: 'success',
   				      message: '编辑修改成功!',

   				    });
  this.$data.editVisible = false;
    this.handleSearch();
   				  }else{
   				    this.$message({
   				      type: 'fail',
   				      message: '编辑修改失败!'
   				    });
   				  }
   				  }
   				})
      },
//       // 分页导航
      handlePageChange(val) {
        this.pageIndex=val
        this.handleSearch();

      },
      //条数
      handleSizeChange(val){
        this.pageSize=val
        this.handleSearch();
      }
    },
  // 页面加载
  mounted: function () {

    getRoleId(this)
  }
  }
// 动态绑定城市下拉框
async function getRoleId ($this) {
 // this.$axios.post('/adminCoupon/chengshi', this.$qs.stringify({
 //   parentid: 1
 // })).then(res => {
 //    console.log('数据', res.data)
 //    $this.cityaggregate = res.data
 //    console.log('下拉', $this.cityaggregate)
 //  })



 $this.$axios({
   url: '/adminCoupon/city',
   method: 'get',
   params: {
     parentid: 1
   }
 }).then(res => {
   console.log('数据', res.data)
   $this.cityaggregate = res.data
   console.log('下拉', $this.cityaggregate)
 })

}

</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
</style>
